import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ConstrainDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('尺寸限制类和装饰容器'),
        centerTitle: true,
        actions: <Widget>[
          // UnconstrainedBox去除父组件的尺寸限制，但是仍然占有相应的空间
          UnconstrainedBox(
            child: Padding(
              padding: EdgeInsets.only(right: 20),
              child: SizedBox(
                width: 20,
                height: 20,
                child: CircularProgressIndicator(
                  strokeWidth: 2,
                  valueColor: AlwaysStoppedAnimation(Colors.white70),
                ),
              ),
            ),
          )
        ],
      ),
      body: Column(
        children: <Widget>[
          // ConstrainedBox用于对子组件添加额外的约束
          ConstrainedBox(
            constraints:
            BoxConstraints(minWidth: double.infinity, minHeight: 50),
            child: Container(
              height: 5,
              // DecoratedBox可以在其子组件绘制前(或后)绘制一些装饰（Decoration），如背景、边框、渐变等.
              // decoration：代表将要绘制的装饰，它的类型为Decoration.
              // position：此属性决定在哪里绘制Decoration，它接收DecorationPosition的枚举类型，
              //           该枚举类有两个值：
              //               background：在子组件之后绘制，即背景装饰。
              //               foreground：在子组件之上绘制，即前景
              child: DecoratedBox(
                // BoxDecoration类是Decoration的子类
                decoration: BoxDecoration(color: Colors.red),
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 20),
            alignment: Alignment.center,
            // SizedBox用于给子元素指定固定的宽高
            child: SizedBox(
              width: 80,
              height: 80,
              child: DecoratedBox(
                decoration: BoxDecoration(color: Colors.red),
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(top: 20),
            // 多重限制时，
            // 对于minWidth和minHeight来说，是取父子中相应数值较大的
            // 对于maxWidth和maxHeight来说，是取父子中相应数值较小的
            child: ConstrainedBox(
              constraints: BoxConstraints(minWidth: 60, minHeight: 60),
              child: ConstrainedBox(
                constraints: BoxConstraints(minWidth: 90, minHeight: 20),
                child: DecoratedBox(
                  decoration: BoxDecoration(color: Colors.red),
                ),
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(top: 20),
            child: DecoratedBox(
              decoration: BoxDecoration(
                  gradient: LinearGradient(
                      colors: [Colors.red],
                      begin: Alignment.centerLeft,
                      end: Alignment.centerRight,
                      tileMode: TileMode.clamp
                  ),
                  borderRadius: BorderRadius.circular(3.0),
                  boxShadow: [
                    BoxShadow(
                        color: Colors.black54,
                        offset: Offset(2, 2),
                        blurRadius: 4)
                  ],
                  shape: BoxShape.rectangle
              ),
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 80, vertical: 18),
                child: Text(
                  'Login',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          )
        ],
      ),

    );
  }

}